<template>
  <ul>
    <router-link tag="li" to="/index" active-class="selected">
      <img src="https://cdn.vgn.cn/mini-program/svg/screen.svg" />
      折扣
    </router-link>
    <router-link tag="li" to="/发现游戏" active-class="selected">
      <img src="https://cdn.vgn.cn/mini-program/svg/screen.svg" />
      发现游戏
    </router-link>
    <router-link tag="li" to="/circle" active-class="selected">
      <img src="https://cdn.vgn.cn/mini-program/svg/screen.svg" />
      游戏圈
    </router-link>
    <router-link tag="li" to="/mine" active-class="selected">
      <img src="https://cdn.vgn.cn/mini-program/svg/screen.svg" />
      我的
    </router-link>
  </ul>
</template>
<script>
export default {
  methods: {
    jump(path) {
      if (this.$route.fullPath === path) return;
      this.$router.push(path);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("@/style/index.less");
ul {
  width: 100%;
  .height(56);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #f5f5f5;
  li {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      .width(28);
      .height(28);
      .margin(-3,0,3,0);
    }
  }
  .selected {
    img {
      background-color: #000;
    }
  }
}
</style>
